import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  //  定义mybox
  // read要设置位false
  @ViewChild('mybox', {read: false, static: true}) mybox:ElementRef
  @ViewChild('mybtn', {read: false, static: true}) mybtn:ElementRef
  public username: string = 'ywj';
  public flag: boolean = false;
  public arr: string[] = ['新闻1', '新闻2', '新闻3'];
  constructor(public router: Router) { }
  ngOnInit() {
  }
  // 在这个方法中适合操作dom
  ngAfterViewInit(): void {
    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
    //Add 'implements AfterViewInit' to the class.
    var dom:any = document.getElementById('box');
    dom.style.background = 'red';
    console.log(this.mybox)
    //  this.mybox.nativeElement是dom节点
    this.mybox.nativeElement.style.background = 'green';
  }
  getUsername(): string {
    return this.username;
  }
  toggle() {
    this.flag = !this.flag;
    if (this.flag) {
      this.mybtn.nativeElement.style.transform = "translate(0,0)"
    } else {
      this.mybtn.nativeElement.style.transform = "translate(100%,0)"
    }
  }
  godetail() {
    // 动态路由
    // this.router.navigate(['/newdetail/0']);
    // 动态路由 另一种传值方式
    // this.router.navigate(['/newdetail', '1']);

    //  get传值方式
    let navigationExtras: NavigationExtras = {
      queryParams: { id: 1 }
    }
    this.router.navigate(['/newdetail'], navigationExtras);
  }
}
